﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <link href="bootstrap.css" rel="stylesheet" />
    <link href="bootstrap-theme.css" rel="stylesheet" />
    <script src="jquery.js"></script>
    <script src="vue.js"></script>
    <script src="ModuleLoader.js"></script>
    <script src="FastHttpApi.js"></script>
    <script src="AdminController.js"></script>
    <script src="FileManagerController.js"></script>
    <script src="ReadFileHandler.js"></script>
    <script src="bootstrap.js"></script>
    <script src="md5.js"></script>
    <title>FastHttpApi Service Management</title>
</head>
<body>

    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container" slot="header">

        </div>
    </div>


    <div class="container bs-docs-container" style="padding-top:60px;">
        <div slot="mainBar">
        </div>
        <div class="row">
            <form class="navbar-form navbar-left btn-group-sm" style="margin-bottom:4px;" role="search">
                <div class="form-group">
                    <input id="folderName" type="text" class="form-control" placeholder="Folder Name">
                </div>
                <a href="javascript:void(0)" class="btn btn-default" onclick="CreateFolder()">New Folder</a>

            </form>
        </div>
        <div class="row">
            <div class="col-md-7">
                <div style="padding:6px;padding-left:0px">
                    <ul class="list-group" id="lstDoc">
                        <li class="list-group-item" v-for="item in Data">
                            <a v-if="item.Name != '/' && item.Name !='\\'" href="javascript:void(0)" v-on:click="DeleteResource(item.Name,item.IsFile)"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>
                            <span v-if="item.IsFile==true" class="glyphicon glyphicon-link" aria-hidden="true"></span>
                            <span v-else class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>
                            <a v-if="item.IsFile==true" v-bind:href="[item.Url+'?tag=manager']" target="_blank" style="padding-left:4px;">{{item.Name}}</a>
                            <a v-else href="javascript:void(0)" v-on:click="enterFolder(item.Path)" style="padding-left:4px;">{{item.Name}}</a>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="col-md-4">
                <div class="form-group">
                    <input id="upfile" type="file" multiple="multiple" class="file">
                </div>
                <div id="updateBars">
                    <div v-for="item in Data" class="progress" style="margin:0px;margin-top:6px;">
                        <div class="progress-bar progress-bar-success" v-bind:width="[item.percent+'%']" v-bind:style="{width:item.percent+'%'}">
                            {{item.name}}({{item.percent}}%)
                        </div>
                    </div>
                </div>
            </div>



        </div>
    </div>
    <br />
    <br />
    <br />
    <br />

    <div class="navbar navbar-inverse navbar-fixed-bottom">
        <div class="container" style="color:aliceblue;text-align:center;" slot="footer">

        </div>
    </div>
    <script>
        var root = '';
        var uploadItems = new Array();
        var lstDocControl;
        var lstUploadControl;
        $(document).ready(function () {
            lstDocControl = new Vue({ el: '#lstDoc', data: { Data: [] } });
            lstUploadControl = new Vue({ el: '#updateBars', data: { Data: uploadItems } });
            listResource();
            $('#upfile').change(function handleFileSelect(evt) {
                if (evt.target.files && evt.target.files.length > 0) {
                    var files = evt.target.files;
                    for (var i = 0; i < files.length; i++) {
                        var file = files[i];
                        var rf = new readFileHandler(file);
                        uploadItems.push(rf);
                        uploadFile(rf);
                    }
                }
            });
        });

        function removeUpload(rf) {
            setTimeout(function () {
                var i = uploadItems.indexOf(rf);
                if (i != -1) {
                    uploadItems.splice(i, 1);
                }
            }, 2000);
        }

        async function uploadFile(rf) {
            if (rf.completed() != true) {

                var data = await rf.read();
                if (!data.errCode) {
                    var result = await _FileManagerUploadFile(root, data);
                    if (result.Code != 200) {
                        alert(result.Error);
                        removeUpload(rf);
                        return;
                    }
                    else {
                        if (data.Eof == true) {
                            removeUpload(rf);
                            listResource();
                        }
                        else {
                            uploadFile(rf);
                        }
                    }
                }
                else {
                    removeUpload(rf);
                    alert(data.name);
                }
            }
            else {
                removeUpload(rf);
            }
        }

        function enterFolder(name) {
            if (name == '/')
                root = '';
            else
                root = name;
            listResource();
        }

        async function DeleteResource(name, isfile) {
            if (confirm('want to delete file（' + name + '?')) {
                var result = await _FileManagerDeleteResource(root, name, isfile);
                if (result.Code == 403) {
                    window.location.href = result.Data;
                }
                else {
                    listResource();
                }
            }
        }

        async function CreateFolder() {

            if (!$('#folderName').val()) {
                alert("Please enter a folder name!")
                return;
            }
            var result = await _FileManagerCreateFolder(root, $('#folderName').val());
            if (result.Code == 403) {
                window.location.href = result.Data;
            }
            else {
                $('#folderName').val('');
                listResource();
            }
        }

        async function listResource() {
            var result = await _FileManagerList(root);
            if (result.Code == 403) {
                window.location.href = result.Data;
            }
            else {
                if (result.Code == 200) {
                    lstDocControl.Data = result.Data;
                }
                else
                    alert(result.Error);
            }
        }

    </script>

</body>

</html>